<!--
@author مۇختەرجان مەخمۇت (mutearjan mahmood)
@email yeganaaa@163.com`
@create date 2020-09-05 20:15:04
@modify date 2020-09-05 20:15:04
@desc [description]
-->
<html>
    <script src="../node_modules/dream_rpc/bin/dream_rpc_browser.production.js"></script>
    <script src="../node_modules/dream_rpc_node_websocket/bin/dream_rpc.websocket_bridge_host.production.js"></script>
        <div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column;">
            <div style="flex-grow: 1; overflow: auto;" id="screen"></div>
            <div style="display: flex; height: 150px;">
                <textarea id="content" style="flex-grow: 1;"></textarea>
            </div>
            <div style="display: flex; flex-direction: row;">
                <input type="text" id="sender">
                <button onclick="sendBroadcast()">Send</button>
            </div>
        </div>
    <script>
        
        const display = document.getElementById("screen")
        const content = document.getElementById("content")
        const sender = document.getElementById("sender")

        let client
        class MyBroadcastClientImplementation {
            constructor() {
                /**
                 * Related state management, please visit github (or gitee) documentation
                 */
                this.stateModule = new dream_rpc.StateModuleInMemoryImplementation();
            }
            /**
             * Calling when server side occur events related this client.
             * @param error error
             */
            async sendErrorMessage(error) {
                console.error(error);
            }
            async onBroadcastReceived(args) {
                let content = `A message received by [${args.sender}] with the following content: [${args.message}]`
                console.log(content)
                display.innerText += content + "\n"
            }
        }
        async function main() {
            client = new dream_rpc.RpcBridge(new dream_rpc_node_websocket.WebSocketBridgeHost(async () => new WebSocket("ws://127.0.0.1:8000/Broadcast")), new MyBroadcastClientImplementation());
            await client.connect();
            display.innerText += "Connect to RPC server: [OK]\n"
        }
        async function sendBroadcast() {
            await client.remoteInterface.sendBroadcast({
                sender: sender.value,
                message: content.value
            })
        }
        main();
    </script>
</html>